<template>
  <div>
    <van-row type="flex" class="head">
      <van-col span="10"
        ><router-link to="/SetUp"
          ><van-icon size="25px" name="arrow-left" /></router-link
      ></van-col>
      <van-col span="14" class="sp_1">修改密码</van-col>
    </van-row>
    <div class="bgc">
      <div class="bgc_1">
        <div class="bgc_2">
          <van-row type="flex" class="bgc2_row">
            <van-col span="24">
              <div>
                <span class="bgc2_sp">旧密码</span>
                <br />
                <input type="text" class="bgc2_inp" />
              </div>
            </van-col>
          </van-row>
          <van-row type="flex" class="bgc2_row">
            <van-col span="24">
              <div>
                <span class="bgc2_sp">新密码</span>
                <br />
                <input type="text" class="bgc2_inp" v-model="pass" />
              </div>
            </van-col>
          </van-row>
          <van-row type="flex" class="bgc2_row">
            <van-col span="24">
              <div>
                <span class="bgc2_sp">重复新密码</span>
                <br />
                <input type="text" class="bgc2_inp" v-model="pass1" />
              </div>
            </van-col>
          </van-row>
          <van-row type="flex" class="passshow" v-show="passshow">
            <van-col span="24"> 两次密码不一致 </van-col> </van-row
          ><van-row type="flex" class="passshow" v-show="passshow1">
            <van-col span="24"> 提交成功 </van-col>
          </van-row>
        </div>
      </div>
      <van-row type="flex">
        <van-col span="24">
          <button class="bgc_but" @click="butt">提交</button>
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pass: "",
      pass1: "",
      passshow: false,
      passshow1: false,
    };
  },
  methods: {
    butt() {
      if (this.pass != this.pass1) {
        this.pass = "";
        this.pass1 = "";
        this.passshow = true;
      } else if (this.pass === this.pass1 && this.pass != "") {
        this.pass = "";
        this.pass1 = "";
        this.passshow1 = true;
      } else {
        this.passshow1 = false;
        this.passshow = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.head {
  width: 100%;
  height: 27px;
  padding: 10px 0;
  .sp_1 {
    font-weight: 500;
    font-size: 17px;
  }
}
.bgc {
  width: 100%;
  height: 803px;
  margin-top: 5px;
  background-color: #f1f1f1;
  padding: 0 10px;
  .bgc_1 {
    padding-top: 15px;
    padding-bottom: 20px;
    .bgc_2 {
      background-color: white;
      padding: 0 10px;
      .bgc2_row {
        padding: 15px 5px;
        .bgc2_sp {
          font-size: 14px;
        }
        .bgc2_inp {
          width: 100%;
          height: 30px;
          border: none;
          border-bottom: 1px solid black;
          margin-top: 5px;
        }
      }
    }
  }
  .bgc_but {
    width: 90%;
    height: 50px;
    margin: 0 3%;
    border-radius: 10px;
    background-color: #31313b;
    border: none;
    color: white;
    margin-top: 10px;
  }
  .passshow {
    color: red;
    text-align: center;
    padding: 10px 0;
  }
}
</style>